<template>
    <div id="index">
     <div class="main">
    <div class="one">
      <router-link to="/chatone">全部</router-link>
      <router-link to="/noticechat">我发起</router-link>
    </div>

      <div class="two"  @click="to()">
      <div class="Img">
        <img src="favicon.ico" alt="">
      </div>
      <div class="text">
        <div class="up">
          <b class="name">每日新发现</b>
          <b class="time">20:47</b>
        </div>
        <div class="bottom">有人向你求助，出来工作快三年了...</div>
      </div>
    </div>
      <div class="two" @click="go()">
      <div class="Img">
        <img src="favicon.ico" alt="">
      </div>
      <div class="text">
        <div class="up">
          <b class="name">直课堂</b>
          <b class="time">16：42</b>
        </div>
        <div class="bottom">拒绝躺平，学java，发展好，yyds</div>
      </div>
    </div>

    <div class="two" v-for="(v,i) in this.$store.state.xingyu.Xy" :key="i" @click="fun(v)" >
      <div class="Img">
        <img :src="v.img" alt="">
      </div>
      <div class="text">
        <div class="up">
          <b class="name">{{v.name}}</b>
          <b class="time">{{v.time}}</b>
        </div>
        <div class="bottom">{{v.text|jieqq}}</div>
      </div>
    </div>
     </div>
     <DownDown/>
    </div>
  </template>
  
  <script>
  
  export default {
    data(){
      return{
       
      }
    },
    mounted(){
      this.$store.dispatch("QWER_QQ")
    },
  methods:{
    fun(v){
              this.$router.push({
                name:'chatrouter',
                params:{ chatrouter: v}
              })
            },
    to(){
    this.$router.push("/discuss")
  },
  go(){
    this.$router.push("/address")
  },
  },

  filters: {
            jieqq(val) {
            if (val.length > 8) {
            return val.substr(0, 15) + "..."
                    } else {
                        return val
                    }
              }
            },
  }
  </script>
  
  <style lang="scss" scoped>
a,
u {
 text-decoration: none;
}
/* 清楚默认加粗效果 让加粗标签不加粗 */
b,
strong {
 font-weight: 400;
}
* {
 padding: 0;
 margin: 0;
 /* 将所有的标签变成怪异盒子 */
 box-sizing: border-box;
 font-size: 0.16rem;
}    
  #index{
  
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .625rem;
      background-color: #38c1ba;
      height: 3.125rem;
      a{
        font-size: .75rem;
        color: white;
        margin-right: 20px;
      }
      .right{
        height: .75rem;
        width: .75rem;
        border-radius: 50%;
        background-color: red;
      }
    }
    .main{
      flex: 1;
      overflow: auto;
      background-color: #f6f6f6;
      overflow: auto;
      min-height: 36.25rem;
      .one{
        height: 2.75rem;
        border-bottom: 1px solid gray;
        line-height:2.75rem ;
        padding: 0 .625rem;
        margin-right: 1.25rem;
        a{
          margin-right: 20px;
          font-size: .875rem;
        }
      }
      .two{
        height: 4.6875rem;
        display: flex;
        align-items: center;
        padding: 1.25rem;
        background-color: white;
        margin: .625rem 0;
        .Img{
          height: 3.125rem;
          width: 3.125rem;
          border-radius: 50%;
          margin-right: 10px;
        }
        .text{
          display: flex;
            flex-direction: column;
            line-height: 1.75rem;
          .up{
            width: 270px;
            display: flex;
            justify-content: space-between;
            b:nth-child(1){
                font-size: .875rem;
                font-weight: 700;
            }
          }
        }
      }
    }
  
  }
  .active{
   color: red;
  }
  </style>